<template>
<div id="evaluates" class="bg-assist">
	<sub-page-header title="我的评价"></sub-page-header>
	<div v-if="evaluates.length == 0" class="empty" style="height:500px;margin-top:100px;">
		<img src="../../assets/empty.png" width="64"/><br>您还没有发布过评价~~
	</div>

	<div class="evaluates-box">
		<div v-for="evaluate in evaluates" class="evaluate bg-white" :key="evaluate.id">
			<div class="evaluate-header">
				<img :src="evaluate.user.avatar ? evaluate.user.avatar : '/images/avatar.png'" class="avatar"> 
				<span>{{evaluate.user.nickname}}</span> 
				<el-rate 
					v-model="evaluate.star"
					disabled
					show-text
					text-color="#ff9900"
					text-template="{value} 分"
				/>
			</div>
			<div class="evaluate-body">{{evaluate.content}}</div>
			<div class="evaluate-images" v-if="evaluate.images.length > 0">
				<h5><span style="color:#20A0FF;">图片:</span></h5>
				<img v-for="img in evaluate.images" :src="img" />
			</div>
			<div class="evaluate-footer"><span>{{evaluate.create_time}}</span></div>
		</div>
	</div>
	<div class="bottom-margin"></div>
</div>
</template>

<script>
import SubPageHeader from '~/components/SubPageHeader.vue';
import api from '~/api/api.js';

export default {
	components : {
		SubPageHeader
	},
	data () {
		return {
			inLoading: false,
			next_page: 1,
			total: 0,
			current_page: 0,
			evaluates: []
		};
	},
	created () {
		let vue = this;
		vue.loadData();
		window.addEventListener('scroll', () => {
			let element = document.body;
			if (element.scrollHeight - element.scrollTop === element.clientHeight) {
				this.loadData();
			}
		});
	},
	methods: {
		loadData () {
			let vue = this;
			if (vue.next_page < 1 || this.inLoading) {
				return;
			}
			vue.inLoading = true;
			api.get(`/user/evaluates?page=${vue.next_page}`)
			.then(function (response) {
				vue.inLoading = false;
				let page = response.data;
				vue.next_page = page.next_page;
				vue.total = page.total;
				vue.current_page = page.current_page;
				if(vue.current_page == 1) {
					vue.evaluates = page.data;
				} else {
					vue.evaluates = vue.evaluates.concat(page.data);
				}
			});
		}
	}
}
</script>

<style scoped>
	#evaluates {
		min-height: 500px;
	}
	.evaluate-header img{
		margin-bottom: 10px;
	}

	.evaluate-images img {
		width: 100px;
		height: 100px;
		margin-bottom: 10px;
	}

	.evaluate-images img:nth-of-type(even) {
		margin-left: 10px;
	}
</style>